<template>
    <div class="page">
        <div class="loan-list">
            <div class="loan-info">
                <img :src="info.logo" style="width: 58px;height: 58px;"/>
                <div class="organ-info">
                    <div class="organ-name">{{ info.name }}</div>
                    <div class="organ-service">{{ info.keyword }}</div>
                    <div class="organ-peopleCount">
            <span>通过率{{ info.passPer }}%</span
            >
                    </div>
                </div>
            </div>
        </div>
        <div class="moneyItem-box">
            <div class="money-item">
                <div class="money-txt">额度(元)</div>
                <div class="money-conter">{{info.loanLimit}}</div>
            </div>
            <div class="money-item">
                <div class="money-txt">借款期限</div>
                <div class="money-conter">{{info.loanTime}}</div>
            </div>
            <div class="money-item">
                <div class="money-txt">日费率</div>
                <div class="money-conter">{{info.dayPer}}</div>
            </div>
        </div>
        <div class="comt_til1">下款攻略</div>
        <ul class="jie_ul">
            <li
                    style="list-style: disc;"
                    v-for="(item, index) in info.methodList"
                    :key="index"
            >
                {{ item }}
            </li>
        </ul>
        <div class="comt_til1">申请条件</div>
        <div class="term-box">
            <div class="term-item" v-for="(item, index) in info.applyReq" :key="index">
                {{ item }}
            </div>
        </div>
        <div class="comt_til1">所需材料</div>
        <div class="term-box">
            <div class="term-item" v-for="(item, index) in info.reqData" :key="index">
                {{ item }}
            </div>
        </div>
        <div class="apply-census">
            <img src="./img/shen_1.png">
            <div>申请人数<span>{{info.applyNumber}}人</span></div>
        </div>
        <div class="apply-btn" @click="applyTap(info.id)">立即申请</div>
    </div>
</template>
<script>
    import {getProductInfo, applyLoan} from "../../api/details"

    export default {
        data() {
            return {
                curProductId: null,
                info: {
                    id: 27,
                    logo:
                        "http://ryj.yunhushuju.com/Upload/image/20190509/5cd39f439b7d1.jpg",
                    name: "易米金服",
                    keyword: "只要身份证，就能借到钱 秒下款",
                    applyNumber: "5000",
                    dayPer: 0.01,
                    loanLimit: "1000-5000",
                    loanTime: "6个月内",
                    applyReq: ["18-55周岁", "实名认证", "银行卡认证"],
                    reqData: ["个人身份证", "个人手机号码"],
                    methodList: ["征信好，下款快额度大", "还款越快，放款越快"],
                    passPer: 98,
                }
            };
        },
        created() {
            this.curProductId = this.$route.query.id
            this.getProduct(this.curProductId)
        },
        methods: {
            applyTap: function (id) {
                applyLoan(id).then(res => {
                    console.log(res)
                })
            },
            getProduct: function (curProductId) {
                getProductInfo(curProductId).then(res => {
                    console.log(res)
                })
            }
        },
    };
</script>
<style scoped type="text/stylus" lang="stylus">
    .page
        font-size 14px;
        background-color #fff;

        .loan-list
            margin-top 0.4rem;
            padding 0 0.3rem;
            display: flex;
            justify-content space-between;

            .loan-info
                max-width 7rem;
                display flex;
                justify-content start;
                align-items start;

                .organ-info
                    margin-left 0.2rem;

                    .organ-name
                        font-size 16px;
                        color #2e2e2e;

                    .organ-service
                        overflow hidden;
                        text-overflow ellipsis;
                        white-space nowrap;
                        width 4rem;
                        color: #666666;
                        line-height 0.6rem;
                        font-size: 13px;

                    .organ-peopleCount
                        font-size 13px;
                        color #666

                        span
                            color red;

        .moneyItem-box
            display flex;
            justify-content space-between;
            border-bottom 8px #e5e5e5 solid;

            .money-item
                width 33%;
                border-right 1px solid #f0f0f0;
                text-align center;
                margin-top 0.3rem;

                .money-txt
                    color: #999999;
                    font-size: 13px;

                .money-conter
                    font-size: 19px;
                    color: #2e2e2e;
                    line-height 0.8rem;

        .comt_til1 {
            font-size 16px;
            border-bottom: 1px solid #eee;
            padding: 10px;
        }

        .jie_ul
            padding 0 10px;

            li
                line-height 30px;

        .term-box
            display flex;
            justify-content start;
            flex-wrap wrap;
            padding 10px;

            .term-item
                border: 1px solid #eee;
                padding: 10px 10px;
                color: #666666;
                margin: 0 10px 10px 0;
                display: block;
                width: auto;
                float: left;
                margin-bottom 0.2rem;

        .apply-census
            width 100%;
            display flex;
            justify-content start;
            align-items center;
            flex-direction column;
            margin-bottom 1rem;

            img
                width 91px;
                height auto;
                margin-bottom 0.3rem;

        .apply-btn
            width 90%;
            background: #4564f2;
            color: #fff;
            font-size: 17px;
            height: 46px;
            line-height: 46px;
            display: block;
            text-align: center;
            border-radius: 30px;
            margin: 0 auto;
</style>
